<template>
  <div>
    <span>
      <input v-model="listMsg[0]" />
      watch a.b
      <input v-model="a.b" />
      <div>
        <button @click="modifyArrByIndex(0)">通过索引修改数组</button>
        <br />
        <button @click="modifyArrByLength">修改数组的length</button>
      </div>
      <p>{{listMsg}}</p>
      <p>{{someAttr}}</p>
    </span>
    <slot />ul list:
    <ul>
      <li is="list-item" v-for="(msg, index) in listMsg" :key="index" :msg="msg" />
    </ul>
  </div>
</template>
<script>
const ListItem = {
  props: {
    msg: String
  },
  template: `<p>{{msg}}</p>`
};
export default {
  components: {
    ListItem
  },
  data() {
    return {
      str: "一段文本3",
      someAttr: "bBF",
      a: {
        b: "co1"
      },
      listMsg: ["rtyu", "corleone", "xiao"]
    };
  },
  methods: {
    modifyArrByIndex(i) {
      this.listMsg[i] = this.listMsg[i] + Math.floor(Math.random() * 10);
    // this.listMsg.push(Math.floor(Math.random()*10).toString())
      console.log('the listmsg:', i, this.listMsg);
    },
    modifyArrByLength() {
        const sub = Math.round(Math.random() * 2 - 1);
      this.listMsg.length += sub;
      console.log('the listmsag:', this.listMsg, sub);
    }
  },
  watch:{
    listMsg(newVal){
      console.log('the list msg changed:', newVal);
    }
  },
  mounted() {
    this.$watch(
      "a",
      newVal => {
        console.log("the new a:", newVal);
      },
      {
        deep: true
      }
    );
  }
};
</script>